<template>
    <TabGrayBarMultipleCard :title="'两算一控'" @onMore="goDetail(props.permi)" :tabs="card.tabs" :curTab="card.curTab" @onChange="changeTab"
        :tabRight="card.tabRight" :grayCardList="card.grayCardList"
        :echartId="`myEChartsBar-${props.permi}-twoControl`" :echartData="card.echartData" 
        :legendList="[{imgUrl: 'gray', text: '预算'}, {imgUrl: 'green', text: '实际(≥预算)'}, {imgUrl: 'red', text: '实际(＜预算)'}]"
        :updateText="card.updateText"
        v-btnPermi="{ permi: props.permi, noReport: true, isHiden: true, hideList: props.hideList }">
 </TabGrayBarMultipleCard>
</template>

<script setup>
import TabGrayBarMultipleCard from '@/DbComponents/tabGrayBarMultipleCard'

import { toThousands } from '@/utils/number-util'
import dashBoardApi from '@/api/Manage/Business/dashBoard'
import { reactive, watch, computed } from 'vue'
import { reportLog } from '@/utils/reportLog'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute().query
const tabPermi = route.tabPermi
const props = defineProps({
    permi: {
        type: String,
        required: false,
        default: ''
    },
    hideList: {
        type: Array,
        required: false,
    },
    biProjectCode: {
        type: String,
        required: false,
        default: ''
    },
    updateDate: {
        type: String,
        required: false,
        default: ''
    },
    bizType:{type:String, default: 'other'}
})
let tabsObj = {
    other:{
        tabs: [{ label: 'EBITDA率', value: 'EBITDA率' }],
        curTab: 'EBITDA率',
        grayCardList: [
            { label: '整场预算', value: '', unit: '%', color: '' }, 
            { label: '整场实际', value: '', unit: '%', color: '' }, 
            { label: '对标结论', value: '', unit: '', color: '' }
        ]
    },
    HOTEL_APARTMENT:{
        tabs: [{ label: '毛利率', value: '毛利率' }],
        curTab: '毛利率',
        grayCardList: [
            { label: '预算GOP率', value: '', unit: '%', color: '' }, 
            { label: '实际GOP率', value: '', unit: '%', color: '' }, 
            { label: '对标结论', value: '', unit: '', color: '' }
        ]
    }
}
const card = reactive(
    {
        tabs: tabsObj[props.bizType].tabs,
        curTab: tabsObj[props.bizType].curTab,
        tabRight: '',
        grayCardList: tabsObj[props.bizType].grayCardList,
        unitText: '',
        updateText: '',
        echartData: {},
        startDate: '',
        endDate: '',
    }
)
const changeTab = () => {
    getCardData()
    getChartData()
}
const getCardData = () => {
    dashBoardApi.queryTwoCalculateCardApi({ biProjectCode: props.biProjectCode, timeType: card.curTab, dataTime: props.updateDate }).then((res) => {
        if (res.data.code == 200) {
            card.tabRight = res.data.data.yearMonth
            card.grayCardList[0].value = toThousands(res.data.data.budgetAmount)
            card.grayCardList[1].value = toThousands(res.data.data.actualAmount)
            let isHaveVal = res.data.data.budgetAmount !== '-' && res.data.data.actualAmount !== '-'
            card.grayCardList[2].value = isHaveVal ? res.data.data.completionRate : '-'
            card.grayCardList[2].color = isHaveVal ? res.data.data.completionRateFlag : ''
            card.unitText = res.data.data.valueUnit
            // yearMonth 时间
        }
    }).catch(err => {
        console.log(err)
    });
}
const getChartData = () => {
    dashBoardApi.queryTwoCalculateChartApi({ biProjectCode: props.biProjectCode, timeType: card.curTab, dataTime: props.updateDate }).then((res) => {
        if (res.data.code == 200) {
            // res.data.data.yData[0].data = ["85.9", {value: "57.4", itemStyle: {color: '#a90000'}, label: {textStyle: {color: 'yellow'}}}, {value: "57.4", itemStyle: {color: '#a90000'}, label: {textStyle: {color: 'green'}}}] // 测试数据
            card.echartData = res.data.data
        }
    }).catch(err => {
        console.log(err)
    });
}
const goDetail = (permi) => {
    reportLog({
        type: 4,
        resourceKey: permi,
    })
    // 跳转两算一控的下钻页
    router.push({
        path: '/page/routeController/index',
        query: {
            rid: 'Manage_Business_TwoControl_Detail',
            rTitle: '两算一控明细',
            biProjectCode: props.biProjectCode,
            updateDate: props.updateDate,
            tabPermi: tabPermi,
            bizType: route.bizType
        },
    })
}
getCardData()
getChartData()

const biProjectCode = computed(() => {
    return props.biProjectCode
});
watch(biProjectCode, () => {
    getCardData()
    getChartData()
}, { deep: true });

</script>

<style scoped lang="scss"></style>
